<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function getFirstNumber() {
        return document.getElementById("first").value;
    }

    function getSecondNumber() {
        return document.getElementById("second").value;
    }

    function addNumber() {
        var number = Number(getFirstNumber()) + Number(getSecondNumber());
        console.log("getFirstNumber()---" + getFirstNumber());
        console.log("getSecondNumber()---" + getSecondNumber());
        console.log("number---" + number);
        document.getElementById("result").innerHTML = number;
    }

    function subtractNumber() {
        var number = Number(getFirstNumber()) - Number(getSecondNumber());
        document.getElementById("result").innerHTML = number;
    }

    function rideNumber() {
        var number = Number(getFirstNumber()) * Number(getSecondNumber());
        document.getElementById("result").innerHTML = number;
    }

    function devideNumber() {
        var number = Number(getFirstNumber()) / Number(getSecondNumber());
        document.getElementById("result").innerHTML = number;
    }
</script>
<body>
<table border="1" style="position: center">
    <tr>
        <td>第一个数：</td>
        <td>
            <input type="text" id="first"/>
        </td>
    </tr>
    <tr>
        <td>第二个数：</td>
        <td>
            <input type="text" id="second"/>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <button style="width: inherit" onclick="addNumber()">+</button>
            <button style="width: inherit" onclick="subtractNumber()">-</button>
            <button style="width: inherit" onclick="rideNumber()">*</button>
            <button style="width: inherit" onclick="devideNumber()">/</button>
        </td>
    </tr>
    <tr>
        <td>
            <p id="result"></p>
        </td>
    </tr>
</table>
</body>
</html>